<template>
<div class="style-config-box">
    <a-form-model layout="vertical" class="rx-a-form-vertical" style="padding: 12px">
        <a-row :gutter="24">
            <a-col :span="12">
                <a-form-model-item :label="i18n('aggregateIcon','聚合图标')">
                    <a-switch v-model="config.icon"/>
                </a-form-model-item>
            </a-col>
            <a-col :span="12">
                <a-form-model-item :label="i18n('iconColor','图标颜色')">
                    <input :value="config.iconColor" @input="colorChange($event,'iconColor')" type="color" style="width: 100px;">
                </a-form-model-item>
            </a-col>

            <a-col :span="24">
                <a-form-model-item :label="i18n('fontSize','字体大小')">
                    <a-input-number v-model="config.fontSize" :default-value="14" :min="12" :max="40" style="width: 100%;"/>
                </a-form-model-item>
            </a-col>
            <a-col :span="12">
                <a-form-model-item :label="i18n('fontWeight','字体粗细')">
                    <a-select v-model="config.fontWeight"  default-value="normal" style="width: 100%" >
                        <a-select-option value="normal">{{i18n('default','默认')}}</a-select-option>
                        <a-select-option value="bold">{{i18n('bold','加粗')}}</a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-col>
            <a-col :span="12">
                <a-form-model-item :label="i18n('color','字体颜色')">
                    <input :value="config.color" type="color" @input="colorChange($event,'color')"  style="width: 100px;">
                </a-form-model-item>
            </a-col>
            <a-col :span="12">
                <a-form-model-item :label="i18n('prefix','前缀')">
                    <a-input v-model="config.prefix"/>
                </a-form-model-item>
            </a-col>
            <a-col :span="12">
                <a-form-model-item :label="i18n('suffix','后缀')">
                    <a-input v-model="config.suffix"/>
                </a-form-model-item>
            </a-col>

        </a-row>
    </a-form-model>
    <div class="calc-style-footer">
        <a-button type="primary" @click="ok" style="margin-right: 10px;">{{i18n('confirm','确定')}}</a-button>
        <a-button @click="cancel">{{i18n('cancel','取消')}}</a-button>
    </div>
</div>
</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2024-10-24 16:15
 */
import { Util } from "@lowcode/jpaas-common-lib";
import {cloneDeep} from 'lodash-es'
export default {
    name: "calcStyleConfigDialog",
    props:{
        styleConfig:{},
        layerid:{},
        destroy:{}
    },
    data(){
        return {
            config:{
                fontSize:14,
                iconColor:'#4d9eff',
                fontWeight:'normal'
            }
        }
    },
    created(){
        let obj =  this.styleConfig ?? {} ;
        this.config = {...this.config,...obj}
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        colorChange(e,type){
            let { value } = e.target ;
            this.config[type] = value ;
        },
        ok(){
            Util.closeWindow(this,'ok',cloneDeep(this.config))
        },
        cancel(){
            Util.closeWindow(this)
        }
    }
}
</script>

<style scoped>
.style-config-box{
    display: grid;
    grid-template-rows: 1fr auto;
}
.calc-style-footer{
    padding: 10px;
    text-align: center;
    border-top: 1px solid #ddd;
}
/* 重置浏览器默认的color输入框样式 */
.style-config-box input[type="color"]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 4px;
    padding: 0;
}
.style-config-box input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
    padding: 0;
}

/* 设置自定义样式 */
.style-config-box input[type="color"] {
    height: 30px; /* 设置高度 */
    padding: 0; /* 内边距 */
    border: none; /* 边框 */
    border-radius: 5px; /* 边框圆角 */
    background-color: #f0f0f0; /* 背景颜色 */
}

/* 针对Firefox的样式修改 */
.style-config-box input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 4px;
    padding: 0;
}
.style-config-box input[type="color"]::-moz-color-swatch-wrapper {
    border: none;
    border-radius: 4px;
    padding: 0;
}
</style>